<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试路由003</title>
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>

</head>
<body>
<a href="#f1" data-f="https://www.baidu.com" class="fuck">百度</a>
<a href="#f2" data-f="https://123.sogou.com/" class="fuck">搜狗</a>
<div style="width: 500px; height: 500px;background-color: #8055a5" id="divxx">

</div>
<script>
    //监听 浏览器 地址 location改变事件
    window.addEventListener("hashchange",(function () {
        //得到改变后的hash
        alert(location.hash);//带#号
        var hash = location.hash.substring(1);
        alert(hash);//不带#号
        if(hash==='f1'){
            document.getElementById('divxx').innerHTML='<iframe src="https://www.baidu.com" style="height:500px;width:500px"></iframe>';
        }else if(hash==='f2'){
            document.getElementById('divxx').innerHTML='<iframe src="https://123.sogou.com/" style="height:500px;width:500px"></iframe>';
        }

    }));

    //监听浏览器刷新事件
    window.onload =function(){
        //得到改变后的hash
        alert(location.hash);//带#号
        var hash = location.hash.substring(1);
        alert(hash);//不带#号
        if(!hash||hash==='f1'){
            document.getElementById('divxx').innerHTML='<iframe src="https://www.baidu.com" style="height:500px;width:500px"></iframe>';
        }else if(hash==='f2'){
            document.getElementById('divxx').innerHTML='<iframe src="https://123.sogou.com/" style="height:500px;width:500px"></iframe>';
        }

    };

</script>
</body>
</html>